new Vue({
    el: '#database-config-app',
    data: {
        currentView: 'database', // 当前视图：'database' 或 'knowledge',

        // 数据库配置相关数据
        databaseName: '',
        urlDb: '',
        usernameDb: '',
        passwordDb: '',
        dbUploadedFileName: '',
        connectedDatabases: [],

        // 知识文档配置相关数据
        docUploadedFileName: '',
        connectedKnowledgeDocs: [],

        // 搜索关键字
        searchQueryDatabase: '',
        searchQueryKnowledge: '',

        // 过滤后的列表
        filteredDatabases: [],
        filteredKnowledgeDocs: [],
    },
    mounted() {
        // 初始化时加载已连接的数据库和知识文档
        this.fetchConnectedDatabases();
        this.fetchConnectedKnowledgeDocs();
    },
    methods: {
        // 数据库配置方法
        async saveDatabaseConfig() {
            try {
                const payload = {
                    url: this.urlDb,
                    username: this.usernameDb,
                    password: this.passwordDb
                };

                const response = await fetch('http://localhost:8080/database', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(payload)
                });

                const result = await response.json();

                if (result.code === 1) {
                    Swal.fire('成功', '数据库配置已保存', 'success');
                    // 重新获取数据库列表
                    this.fetchConnectedDatabases();
                } else {
                    Swal.fire('失败', result.msg || '数据库配置保存失败', 'error');
                }
            } catch (error) {
                console.error('Error saving database config:', error);
                Swal.fire('错误', '网络错误，无法保存数据库配置', 'error');
            }
        },
        async addDatabase() {
            if (!this.databaseName) {
                Swal.fire({
                    icon: 'error',
                    title: '错误',
                    text: '请输入数据库名称'
                });
                return;
            }

            // 检查数据库名称是否已存在
            const existing = this.connectedDatabases.find(db => db.name === this.databaseName);
            if (existing) {
                Swal.fire({
                    icon: 'error',
                    title: '错误',
                    text: '数据库名称已存在，请使用其他名称'
                });
                return;
            }

            // 确保数据库结构文件已上传
            if (!this.dbUploadedFileName) {
                Swal.fire({
                    icon: 'error',
                    title: '错误',
                    text: '请先上传数据库结构文件'
                });
                return;
            }

            try {
                const payload = {
                    url: this.urlDb,
                    username: this.usernameDb || 'root',
                    password: this.passwordDb || 'root',
                    name: this.databaseName,
                    dbstructure: this.dbUploadedFileName // 假设 dbUploadedFileName 存储的是上传结果
                };

                const response = await fetch('http://localhost:8080/database', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(payload)
                });

                const result = await response.json();

                if (result.code === 1) {
                    Swal.fire('成功', '数据库添加成功', 'success');
                    // 清空输入框
                    this.databaseName = '';
                    // 重新获取数据库列表
                    this.fetchConnectedDatabases();
                } else {
                    Swal.fire('失败', result.msg || '数据库添加失败', 'error');
                }
            } catch (error) {
                console.error('Error adding database:', error);
                Swal.fire('错误', '网络错误，无法添加数据库', 'error');
            }
        },
        async removeDatabase(database) { // 接收整个数据库对象
            if (!database || !database.did) {
                Swal.fire({
                    icon: 'error',
                    title: '错误',
                    text: '无法识别要删除的数据库'
                });
                return;
            }

            const confirmResult = await Swal.fire({
                title: '确认删除',
                text: `确定要删除数据库 "${database.name}" 吗？`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '是',
                cancelButtonText: '否'
            });

            if (confirmResult.isConfirmed) {
                try {
                    const response = await fetch(`http://localhost:8080/database/${database.did}`, {
                        method: 'DELETE'
                    });

                    const result = await response.json();

                    if (result.code === 1) {
                        Swal.fire('成功', '数据库删除成功', 'success');
                        // 重新获取数据库列表
                        this.fetchConnectedDatabases();
                    } else {
                        Swal.fire('失败', result.msg || '数据库删除失败', 'error');
                    }
                } catch (error) {
                    console.error('Error deleting database:', error);
                    Swal.fire('错误', '网络错误，无法删除数据库', 'error');
                }
            }
        },
        // 搜索数据库的方法
        async performSearchDatabase() {
            if (!this.searchQueryDatabase.trim()) {
                // 如果搜索框为空，则获取所有数据库
                this.fetchConnectedDatabases();
                return;
            }

            try {
                const url = `http://localhost:8080/database/list?name=${encodeURIComponent(this.searchQueryDatabase.trim())}`;

                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                const result = await response.json();

                if (result.code === 1) {
                    this.filteredDatabases = result.data || [];
                } else {
                    Swal.fire('失败', result.msg || '搜索数据库失败', 'error');
                }
            } catch (error) {
                console.error('Error searching databases:', error);
                Swal.fire('错误', '网络错误，无法搜索数据库', 'error');
            }
        },
        // 获取所有连接的数据库
        async fetchConnectedDatabases() {
            try {
                const url = 'http://localhost:8080/database';

                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                const result = await response.json();

                if (result.code === 1) {
                    this.connectedDatabases = result.data || [];
                    this.filteredDatabases = this.connectedDatabases;
                } else {
                    Swal.fire('失败', result.msg || '获取数据库列表失败', 'error');
                }
            } catch (error) {
                console.error('Error fetching databases:', error);
                Swal.fire('错误', '网络错误，无法获取数据库列表', 'error');
            }
        },
        triggerDbFileUpload() {
            this.$refs.dbFileInput.click();
        },
        async handleDbFileUpload(event) {
            const file = event.target.files[0];
            if (file) {
                console.log('上传的文件:', file.name);

                // 显示上传中的状态
                Swal.fire({
                    title: '文件上传中...',
                    html: `正在上传数据库结构文件: ${file.name}`,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // 创建 FormData 用于上传文件
                const formData = new FormData();
                formData.append('file', file);

                try {
                    // 使用 fetch 上传文件到后端接口
                    const response = await fetch('http://localhost:8080/database/dbDocument', {
                        method: 'POST',
                        body: formData
                    });

                    // 获取响应文本
                    const text = await response.text();

                    // 关闭加载提示
                    Swal.close();

                    if (response.ok) {
                        Swal.fire({
                            icon: 'success',
                            title: '上传成功',
                            text: `数据库结构文件 ${file.name} 上传成功！`,
                            timer: 2000, // 2秒后自动关闭
                            showConfirmButton: false
                        });
                        this.dbUploadedFileName = text; // 假设后端返回的是 dbstructure 字符串
                    } else {
                        console.error('Server error:', response.statusText);
                        Swal.fire({
                            icon: 'error',
                            title: '上传失败',
                            text: '数据库结构文件上传失败，服务器错误'
                        });
                    }
                } catch (error) {
                    // 关闭加载提示
                    Swal.close();

                    console.error('Fetch error:', error);
                    Swal.fire({
                        icon: 'error',
                        title: '上传失败',
                        text: '网络错误，数据库结构文件上传失败'
                    });
                }
            }
        },

        // 知识文档配置方法
        triggerDocFileUpload() {
            this.$refs.docFileInput.click();
        },
        async handleDocFileUpload(event) {
            const file = event.target.files[0];
            if (file) {
                console.log('上传的文件:', file.name);

                // 显示上传中的状态
                Swal.fire({
                    title: '文件上传中...',
                    html: `正在上传知识文档结构文件: ${file.name}`,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // 创建 FormData 用于上传文件
                const formData = new FormData();
                formData.append('file', file);

                try {
                    // 使用 fetch 上传文件到后端接口
                    const response = await fetch('http://localhost:8080/embedding', {
                        method: 'POST',
                        body: formData // 发送 FormData，包含文件
                    });

                    // 关闭加载提示
                    Swal.close();

                    if (response.ok) {
                        // 假设上传成功后，直接在前端添加到已配置列表
                        this.connectedKnowledgeDocs.push({
                            name: file.name
                        });

                        // 保存到 localStorage
                        // 如果知识文档也需要通过 API 管理，建议替换为相应的 API 调用
                        // 这里保留 localStorage 操作为示例
                        localStorage.setItem('connectedKnowledgeDocs', JSON.stringify(this.connectedKnowledgeDocs));

                        // 显示成功提示
                        Swal.fire({
                            icon: 'success',
                            title: '上传成功',
                            text: `知识文档结构文件 ${file.name} 上传成功！`,
                            timer: 2000, // 2秒后自动关闭
                            showConfirmButton: false
                        });

                        // 显示上传的文件名
                        this.docUploadedFileName = file.name;

                        // 重新执行搜索
                        this.performSearchKnowledge();
                    } else {
                        console.error('Server error:', response.statusText);
                        Swal.fire({
                            icon: 'error',
                            title: '上传失败',
                            text: '知识文档结构文件上传失败，服务器错误'
                        });
                    }
                } catch (error) {
                    // 关闭加载提示
                    Swal.close();

                    console.error('Fetch error:', error);
                    Swal.fire({
                        icon: 'error',
                        title: '上传失败',
                        text: '网络错误，知识文档结构文件上传失败'
                    });
                }
            }
        },
        async removeKnowledgeDoc(doc) {
            if (!doc || !doc.name) {
                Swal.fire({
                    icon: 'error',
                    title: '错误',
                    text: '无法识别要删除的知识文档'
                });
                return;
            }

            const confirmResult = await Swal.fire({
                title: '确认删除',
                text: `确定要删除知识文档 "${doc.name}" 吗？`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '是',
                cancelButtonText: '否'
            });

            if (confirmResult.isConfirmed) {
                // 假设知识文档也有对应的 API 删除接口
                // 这里保留原有的 localStorage 操作为示例
                this.connectedKnowledgeDocs = this.connectedKnowledgeDocs.filter(d => d.name !== doc.name);
                localStorage.setItem('connectedKnowledgeDocs', JSON.stringify(this.connectedKnowledgeDocs));

                Swal.fire('成功', '知识文档删除成功', 'success');

                // 重新执行搜索
                this.performSearchKnowledge();
            }
        },

        // 搜索知识文档的方法
        performSearchKnowledge() {
            if (!this.searchQueryKnowledge.trim()) {
                // 如果搜索框为空，则显示全部知识文档
                this.filteredKnowledgeDocs = this.connectedKnowledgeDocs;
                return;
            }
            // 根据需要决定是否对知识文档名称进行小写转换
            const query = this.searchQueryKnowledge.trim().toLowerCase();
            this.filteredKnowledgeDocs = this.connectedKnowledgeDocs.filter(doc =>
                doc.name.toLowerCase().includes(query)
            );
        },
        // 获取已连接的知识文档
        async fetchConnectedKnowledgeDocs() {
            // 如果知识文档也有 API，可以在这里调用
            // 这里保留原有的 localStorage 操作为示例
            try {
                const storedDocs = JSON.parse(localStorage.getItem('connectedKnowledgeDocs')) || [];
                this.connectedKnowledgeDocs = storedDocs;
                this.performSearchKnowledge();
            } catch (error) {
                this.connectedKnowledgeDocs = [];
            }
        }
    }
});
